<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>付钱</title>
    <link rel="icon" href="/images/chiji.ico" type="image/x-icon">
    <link rel="stylesheet" href="/css/paymoney.css">
    <link rel="stylesheet" href="/libs/bootstrap/bootstrap.min.css">
</head>

<body>
    <header></header>
    <div class="order-cont">
        <strong>选择收货地址</strong>
        <div class="pay-address">
            <ul class="clear" id="addr-list">
                <script type="text/html" id="addrInfo">
                    {{each addrlist ad}}
                    <li class="on" addressid="">
                        <span>{{ad.username}}</span>
                        <p>{{ad.pro}}{{ad.city}}{{ad.town}}{{ad.addr}}</p>
                        <p class="mr">{{ad.phone}}</p>
                        <a href="javascript:;" title="默认收货地址" class="address-default" style="background: #ccc; color: #fff; display: block">&nbsp;&nbsp;默认地址&nbsp;&nbsp;</a>
                        <a href="javascript:;" class="addr-del">x</a>
                    </li>
                    {{/each}}
                    <li class="tj">
                        <a href="javascript:;" id="address-add">
                            <em id="tj-btn"></em>
                            <button type="button" data-toggle="modal" data-target="#myModal" style="margin-left:100px;background:#fff;border:none;margin-top:10px">
                                    <b>新增收货地址</b>  
                            </button>
                        </a>

                    </li>
                </script>
            </ul>
        </div>
        <!-- 模态框 -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="gridSystemModalLabel">新增收货地址</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-2">收件人</div>
                            <div class="col-md-8 "><input type="text" id="username"> </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2 ">手机号码</div>
                            <div class="col-md-8 "><input type="number" id="phone"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-2 ">地区选择</div>

                            <div class="col-md-8 ">
                                <div data-toggle="distpicker" id="target" style="width: 360px;">
                                    <!-- container -->
                                    <select id="pro"></select>
                                    <!-- 省 -->
                                    <select id="city"></select>
                                    <!-- 市 -->
                                    <select id="town"></select>
                                    <!-- 区 -->
                                </div>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-md-2 ">详细地址</div>
                            <div class="col-md-8 "><input type="text" id="addr"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-2 ">邮政编码</div>
                            <div class="col-md-8 "><input type="number" id="townCode"></div>
                        </div>


                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default cancel" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary save">保存</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
        <!-- 确认商品信息 -->
        <div class="order-goods">
            <div class="cart-pay">
                <strong>确认商品信息</strong>
                <div class="order-details" id="cartPay">
                    <script type="text/html" id="cartShop">
                        <table cellspacing="0" cellpadding="0">
                            <thead class="nav_shop">
                                <tr>
                                    <th width="310px">商品信息</th>
                                    <th width="240px">单价(元)</th>
                                    <th width="90px">数量</th>
                                    <th width="200px">金额(元)</th>
                                </tr>
                            </thead>
                            <tbody class="shop_cont" id="shop-list">
                                {{each cartList shop}}
                                <tr data-id="{{shop.id}}">
                                    <td>
                                        <a href="/html/detail.html?id={{shop.id}}">
                                            <img src="{{shop.photo.url}}" alt="商品图">
                                        </a>
                                        <span>{{shop.title.slice(0,10)}}</span>
                                    </td>
                                    <td>
                                        <span><span class="now-price">{{shop.price.toFixed(2)}}元</span><span class="origin-price">{{shop.originPrice}}元</span></span>
                                    </td>
                                    <td>
                                        {{shop.num}}
                                    </td>
                                    <td>{{(shop.price * shop.num).toFixed(2)}}</td>
                                </tr>
                                {{/each}}
                            </tbody>
                        </table>
                        <p>
                            订单备注：
                            <input type="text">
                        </p>
                    </script>
                </div>


            </div>
        </div>
    </div>
    <div class="order-discount">
        <div class="purchase" id="">
            <!-- <script type="text/html" id="cart-final"> -->
            <ul>
                <li> <span id="shopnum"></span> 件商品，商品总价</li>
                <li class="t1 money">138.00元</li>
                <li>运费：</li>
                <li class="t1">0.00元</li>
                <li>实付款（含运费）</li>
                <li class="t1"><b class="money">138.00元</b></li>
                <li class="t3">寄送至：芳草街道蓓蕾东巷4号院</li>
                <li class="t2"> 收货人：蒋文盛 18869727572</li>
            </ul>
            <div class="purchase-btn">
                <a href="javascript:;" title="提交订单" class="dd-btn"><button type="button" data-toggle="modal" data-target="#Modal-pay" style="background:none;border:none;">
                        提交订单 
                </button></a>
                <a href="/html/shopcart.html" title="返回购物车修改" class="xg-btn">返回购物车修改</a>
            </div>
            <!-- </script> -->
        </div>
    </div>
    <div>
        <!-- 模态框 -->
        <div class="modal fade" id="Modal-pay" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="gridSystemModalLabel">请支付</h4>
                    </div>
                    <div class="modal-body" style="background: url(/images/phone.jpg) no-repeat 315px center">


                        <div class="row">
                            <div class="col-md-2 " style="width:20%">商品订单：</div>
                            <div class="col-md-8 " id="sj"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-2 " style="width:20%">支付金额：</div>
                            <div class="col-md-8 "></div>
                        </div>
                        <div class="row">
                            <div class="col-md-2 " style="width:20%">支付方式：</div>
                            <div class="col-md-8 ">
                                <span style="background: url(/images/wechat.png) no-repeat 0 -49px;background-size: 60px 250px;display: inline-block;width: 24px;height:20px"></span> 微信支付</div>
                            <img src="/images/pay.png" alt="" width="200" height="200" style="margin-left: 15%">
                        </div>


                    </div>

                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
    </div>
    <footer></footer>
    <div class="totop" style="color: #ff0000;background: #ccc; width: 100px;text-align: center">返回顶部</div>
    <script src="/libs/require/require.min.js" data-main="/js/paymoney"></script>
</body>

</html>